<template>
  <div style="padding: 20px">
    <!-- 费用减免审批 -->
    <a-card :bordered="false" style="height: 800px">
      <a-form layout="inline" :model="formState" ref="formRef">
        <a-form-item label="申请时间" name="apply">
          <a-range-picker
            allowClear
            v-model:value="formState.apply"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="审批时间" name="approval">
          <a-range-picker
            allowClear
            v-model:value="formState.approval"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="审批人" name="approver">
          <a-tree-select
            v-model:value="formState.approver"
            show-search
            style="width: 320px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择审批人"
            allow-clear
            tree-default-expand-all
            :tree-data="treeDataId"
            tree-node-filter-prop="label"
            @change="onChange"
          >
            <template #title="{ value: val, label }">
              <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
              <template v-else>{{ label }}</template>
            </template>
          </a-tree-select>
        </a-form-item>
        <a-form-item label="审批状态" name="approvalStatus">
          <a-select
            allowClear
            v-model:value="formState.approvalStatus"
            placeholder="请选择"
            style="width: 200px"
            autocomplete="off"
          >
            <!-- 0 审批中 1 同意 2拒绝 -->
            <a-select-option value="审核中">审核中</a-select-option>
            <a-select-option value="同意">同意</a-select-option>
            <a-select-option value="拒绝">拒绝</a-select-option>
            <a-select-option value="作废">作废</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click.prevent="onSubmit">查询</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        size="middle"
        :row-class-name="
          (_record: any, index: number) =>
            index % 2 === 1 ? 'table-striped' : null
        "
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 3000, y: 550 }"
        style="margin-top: 20px"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'active'">
            <a-button type="link" @click="onEdit(record, '2')"> 查看 </a-button>
            <a-button
              :disabled="record.approvalStatus != '审核中'"
              type="link"
              @click="onEdit(record, '0')"
            >
              同意
            </a-button>
            <a-button
              :disabled="record.approvalStatus != '审核中'"
              type="link"
              danger
              @click="onEdit(record, '1')"
            >
              拒绝
            </a-button>
          </template>
          <template v-if="column.dataIndex === 'penaltyReduction'">
            <!-- 违约金减免 -->
            <a-button
              type="link"
              @click="detail1(record, 1)"
              :disabled="record.derateProject != '违约金'"
            >
              查看详情
            </a-button>
          </template>
          <template v-if="column.dataIndex === 'receivableReduction'">
            <!-- 应收减免 -->
            <a-button
              type="link"
              @click="detail1(record, 0)"
              :disabled="record.derateProject != '应收'"
            >
              查看详情
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 同意 -->
    <a-modal
      v-model:open="isConsentOpen"
      width="1000px"
      title="操作审批"
      @ok="ConsentOk"
    >
      <a-textarea
        v-model:value="TextValue"
        placeholder="请输入审批意见"
        :rows="4"
      />
    </a-modal>
    <!-- 违约金减免 -->
    <a-modal
      v-model:open="detailVisible1"
      width="1300px"
      :title="detailType1 == 1 ? '违约金减免' : '应收减免'"
      @ok="detailVisible1 = false"
    >
      <penaltyReductionTable
        :detailData1="detailData1"
        :detailType1="detailType1"
      ></penaltyReductionTable>
    </a-modal>
    <!-- 操作详情 -->
    <a-modal
      v-model:open="isDetailOpen"
      width="100%"
      title=""
      @ok="isDetailOpen = false"
    >
      <isDetailTable :rowData="rowData"></isDetailTable>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, ref, computed, h } from 'vue';
import {
  getDerateApprovaldList,
  derateApprovaldOperation,
  selectCommonId,
  selectCommon,
} from '#/api/core/planAudit';
import { changeConfirmLocale } from 'ant-design-vue/es/modal/locale';
import penaltyReductionTable from './client_component/penaltyReductionTable.vue';
import isDetailTable from './client_component/isDetailTable.vue';
import { message } from 'ant-design-vue';
// 费用减免详情
const detailVisible1 = ref(false);
const detailData1 = ref();
const detailType1 = ref();
const detail1 = (data: any, type: any) => {
  detailVisible1.value = true;
  detailData1.value = data;
  detailType1.value = type; // 0:应收 ,1:违约金
};

const formState = reactive({
  apply: [], // 申请时间
  approval: [], // 审批时间
  approver: null, // 审批人
  approvalStatus: null, // 审批状态
});
const treeDataId = ref(); // 审批人树
// 查询和重置
const formRef = ref();
const onSubmit = () => {
  GetData();
  console.log(toRaw(formState));
};
const resetForm = () => {
  formRef.value.resetFields();
};

// 弹窗
interface row {
  id: string;
}
const isConsentOpen = ref(false); // 同意弹窗
const TextValue = ref(''); // 审批意见
const ApprovalType = ref(''); // 审批类型
const rowData = ref(<row>{}); // 当前行数据
// 查看详情
const isDetailOpen = ref(false);
const onEdit = (data: any, type: string) => {
  console.log(type);
  if (type == 0 || type == 1) {
    rowData.value = data;
    isConsentOpen.value = true;
    TextValue.value = '';
    ApprovalType.value = type;
  } else if (type == 2) {
    isDetailOpen.value = true;
    rowData.value = data; // 当前行数据
  }
};

const ConsentOk = async (e: MouseEvent) => {
  const res = await derateApprovaldOperation({
    id: rowData.value.id, //审批表id
    type: ApprovalType.value, //0同意 1 不同意
    approvalOpinion: TextValue.value, //审批意见
  });
  console.log(res);
  if (res.data.code === 200) {
    message.success(res.data.data);
  } else {
    message.error(res.data.msg || '审批失败');
  }
  GetData();
  isConsentOpen.value = false;
};

const dataSource = ref();
const columns = ref([
  {
    title: '热力卡号',
    dataIndex: 'alipayConsNo',
    key: 'alipayConsNo',
    align: 'center',
    width: 200,
  },
  {
    title: '用户地址',
    dataIndex: 'houseAddress',
    key: 'houseAddress',
    align: 'center',
    width: 200,
  },
  {
    title: '违约金减免',
    dataIndex: 'penaltyReduction',
    key: 'penaltyReduction',
    align: 'center',
    width: 200,
  },
  {
    title: '应收减免',
    dataIndex: 'receivableReduction',
    key: 'receivableReduction',
    align: 'center',
    width: 200,
  },
  {
    title: '申请人',
    dataIndex: 'applicantName',
    key: 'applicantName',
    align: 'center',
    width: 200,
  },
  {
    title: '申请时间',
    dataIndex: 'applicationTime',
    key: 'applicationTime',
    align: 'center',
    width: 200,
  },
  {
    title: '申请原因',
    dataIndex: 'derateReason',
    key: 'derateReason',
    align: 'center',
    width: 200,
  },
  {
    title: '附件',
    dataIndex: '',
    key: '',
    align: 'center',
    width: 200,
  },
  {
    title: '子公司主管领导',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus1',
        key: 'approvalStatus1',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName1',
        key: 'approverName1',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime1',
        key: 'approvalTime',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion1',
        key: 'approvalOpinion1',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '基层站主管',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus2',
        key: 'approvalStatus2',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName2',
        key: 'approverName2',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime2',
        key: 'approvalTime2',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion2',
        key: 'approvalOpinion2',
        align: 'center',
        width: 200,
      },
    ],
  },

  {
    title: '省公司业务主管',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus3',
        key: 'approvalStatus3',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName3',
        key: 'approverName3',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime3',
        key: 'approvalTime3',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion3',
        key: 'approvalOpinion3',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '省公司经理',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus4',
        key: 'approvalStatus4',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName4',
        key: 'approverName4',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime4',
        key: 'approvalTime4',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion4',
        key: 'approvalOpinion4',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '省公司财务',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus5',
        key: 'approvalStatus5',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName5',
        key: 'approverName5',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime5',
        key: 'approvalTime5',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion5',
        key: 'approvalOpinion5',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '省公司法规',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus6',
        key: 'approvalStatus6',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName6',
        key: 'approverName6',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime6',
        key: 'approvalTime6',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion6',
        key: 'approvalOpinion6',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '省公司主管领导',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus7',
        key: 'approvalStatus7',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName7',
        key: 'approverName7',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime7',
        key: 'approvalTime7',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion7',
        key: 'approvalOpinion7',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '总公司业务主管',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus8',
        key: 'approvalStatus8',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName8',
        key: 'approverName8',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime8',
        key: 'approvalTime8',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion8',
        key: 'approvalOpinion8',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '总公司总部财务',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus9',
        key: 'approvalStatus9',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName9',
        key: 'approverName9',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime9',
        key: 'approvalTime9',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion9',
        key: 'approvalOpinion9',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '总公司总部法规',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus10',
        key: 'approvalStatus10',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName10',
        key: 'approverName10',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime10',
        key: 'approvalTime10',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion10',
        key: 'approvalOpinion10',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '总公司主管领导',
    children: [
      {
        title: '审批状态',
        dataIndex: 'approvalStatus11',
        key: 'approvalStatus11',
        align: 'center',
        width: 200,
        // 判断状态修改颜色
        customRender: ({ text }) => {
          if (text === '审核中') {
            return text;
          } else {
            return h('span', { style: { color: '#FF3860' } }, text);
          }
        },
      },
      {
        title: '审批人',
        dataIndex: 'approverName11',
        key: 'approverName11',
        align: 'center',
        width: 200,
      },
      {
        title: '审批时间',
        dataIndex: 'approvalTime11',
        key: 'approvalTime11',
        align: 'center',
        width: 200,
      },
      {
        title: '审批意见',
        dataIndex: 'approvalOpinion11',
        key: 'approvalOpinion11',
        align: 'center',
        width: 200,
      },
    ],
  },
  {
    title: '审批',
    dataIndex: 'active',
    key: 'active',
    align: 'center',
    fixed: 'right',
    width: 200,
  },
]);

// 默认分页
const current = ref(1); // 当前页码
const total = ref(0); // 总条数
const pageSize = ref(10); // 每页条数
// 分页
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));
const handleTableChange = (pag: { current: number; pageSize: number }) => {
  console.log('分页参数', pag);
  current.value = pag.current;
  pageSize.value = pag.pageSize;
  GetData(); // 获取表格数据
};

// 获取表格数据
const GetData = async () => {
  console.log(formState);
  let res = await getDerateApprovaldList({
    approvaldCheckData: {
      applicationTimeBegin:
        formState.apply && formState.apply[0] ? formState.apply[0] : '',
      applicationTimeEnd:
        formState.apply && formState.apply[1] ? formState.apply[1] : '',
      applicantId: '',
      approvalTimeBegin:
        formState.approval && formState.approval[0]
          ? formState.approval[0]
          : '',
      approvalTimeEnd:
        formState.approval && formState.approval[1]
          ? formState.approval[1]
          : '',
      approvalStatus: formState.approvalStatus,
    },
    page: current.value,
    limit: pageSize.value,
  });
  console.log(res);
  dataSource.value = res.data;
  total.value = res.total;
};
GetData();

// 修改初始化方法
const getSelectData = async () => {
  let res = await selectCommonId();
  treeDataId.value = res.map((item: any) => ({
    label: item.name,
    value: item.id || item.userId,
  }));
  console.log(treeDataId.value, '初始化');
};
// 修改onChange方法
const onChange = async (value: any, node: any) => {
  console.log(value, node, 'onChange');
  const res = await selectCommon(value);
  treeDataId.value = updateChildren(treeDataId.value, value, res); // 递归更新子节点
};
const updateChildren = (
  nodes: any[],
  targetValue: string,
  newChildren: any[],
) => {
  return nodes.map((node) => {
    // 当前节点匹配时添加子节点
    if (node.value === targetValue) {
      return {
        ...node,
        children: newChildren.map((child) => ({
          label: child.name,
          value: child.id || child.userId,
          children: [], // 初始化空children用于继续展开
        })),
      };
    }

    // 递归处理子节点
    if (node.children && node.children.length > 0) {
      return {
        ...node,
        children: updateChildren(node.children, targetValue, newChildren),
      };
    }

    return node;
  });
};
getSelectData();
</script>

<style scoped></style>
